import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  TranslationOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme, Select } from 'antd';
import { Navigate, Outlet, useNavigate } from 'react-router-dom';
import { routesItem } from './router/Index';
import { useTranslation } from 'react-i18next';

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const navigate = useNavigate()
  const { t, i18n } = useTranslation();

  const [menu, setMenu] = useState([
    {
      key: '1',
      icon: <UserOutlined />,
      label: 'nav 1',
    }
  ])

  const initDom = useCallback((routes: any[]) => {
    const items = routes.map((item) => {
      const res: any = {}
      res.key = item.path
      if (res.icon) res.icon = item.icon
      res.label = item.label
      if(item.children&&item.children.length>0){
        res.children=initDom(item.children)
      }

      return res
    })
    return items
  }, [])

  useLayoutEffect(() => {
    setMenu(initDom(routesItem))
  }, [])

  const exchangeSj = useCallback((obj) => {
    navigate(obj.key)
  }, [])

  const lang=localStorage.getItem('lang')||i18n.language||'zh'
  const handleChange = (value: string) => {
    i18n.changeLanguage(value)
    localStorage.setItem('lang',value)
  };

  const [theme1,setTheme1]=useState(localStorage.getItem('theme')||'light')
  const handleChange1 = (value: string) => {
    const htmlNode=document.documentElement
    htmlNode.setAttribute('data-theme',value)
    localStorage.setItem('theme',value)
    setTheme1(value)
  };
  useEffect(()=>{
    setTheme1(theme1)
  },[])

  return (
    <Layout style={{ width: '100vw', height: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/home']}
          items={menu}
          onClick={exchangeSj}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <div className='flex items-center justify-between'>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
            <div className='flex items-center'>
              <div className='mr-[30px]'>
                {/* <TranslationOutlined style={{marginRight:'20px'}}/> */}
                <Select
                  defaultValue={lang}
                  style={{ width: 120 }}
                  onChange={handleChange}
                  options={[
                    { value: 'en', label: 'English' },
                    { value: 'zh', label: '中文' },
                  ]}
                />
                <Select
                  defaultValue={theme1}
                  style={{ width: 120 }}
                  onChange={handleChange1}
                  options={[
                    { value: 'light', label: '日间' },
                    { value: 'dark', label: '夜间' },
                  ]}
                />
              </div>
              <span style={{ marginRight: '20px' }}>{localStorage.getItem('username')}</span>
              <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style={{ width: '50px', height: '50px' }} />
            </div>
          </div>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Navigate to='/home' />
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;